<template>
    <div class="main">
      <template>
        <el-table
          :data="restaurants"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="rimg"
            label="饭店logo"
            width="100"
            >

            <template slot-scope="scope">
              <img :src="getImgUrl(scope.row.rimg)" style="width: 30px;height: 30px;"/>
            </template>
          </el-table-column>
          <el-table-column
            label="饭店详情照片"
            width="100"
          > <template slot-scope="scope">
            <div class="restaurantPane">
              <div class="restaurantInfo"  v-for="(pic,picindex) in processImgs(restaurants[scope.$index])" >
                <div class="imgDiv"><img :src="getImgUrl(pic)"></div>
              </div>
             </div>
          </template>
          </el-table-column>

          <el-table-column
            prop="rbus"
            label="营业执照等级"
            width="100"
          >
            <template slot-scope="scope">
              <img :src="getImgUrl(scope.row.chea)" style="width: 30px;height: 30px;"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="rid"
            label="ID"
            width="100">
          </el-table-column>
          <el-table-column
            prop="rname"
            label="饭店名称"
            width="80">
          </el-table-column>
          <el-table-column
            prop="rstate"
            label="状态"
            width="90">
          </el-table-column>
          <el-table-column
            label="电话"
            prop="rphone"
            width="130">
          </el-table-column>
          <el-table-column
            label="日程"
            prop="rcal"
            width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditRestaurant(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteRestaurant(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageInfo.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageInfo.itemCount">
          </el-pagination>
        </div>
        <!--弹框-->
        <el-button size="mini"
                   @click="handleAddRestaurant">新增</el-button>
        <addRestaurant v-if="addDialogIsShow" ref="showAddRestaurant"></addRestaurant>
        <editRestaurant v-if="editDialogIsShow" ref="showEditRestaurant"></editRestaurant>
        <deleteRestaurant v-if="deleteDialogIsShow" ref="showDeleteRestaurant"></deleteRestaurant>
      </template>
    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addRestaurant from '@/components/back/restaurant/addRestaurant.vue'
  import editRestaurant from '@/components/back/restaurant/editRestaurant.vue'
  import deleteRestaurant from '@/components/back/restaurant/deleteRestaurant.vue'


    export default {
        name: "index",
      components : {
        addRestaurant,
        editRestaurant,
        deleteRestaurant
      },
      data(){
        return {restaurants:[],
          addDialogIsShow: false,
          editDialogIsShow:false,
          deleteDialogIsShow:false,
          currentPage: 1,
          pageInfo:{},
          pics:[]
        }
      },
      methods:{
        processImgs(restaurant){
          let rpic = restaurant.rpic;
          let pics = [];
          if(rpic!=null){
           pics  = rpic.split(',')
          }
          return pics;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.setDataFromAxios(val);
        },
        getImgUrl: function (rimg) {
          return this.$store.state.host + "/upload/images/restaurant/" + rimg;
        },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2==0) {
            return 'warning-row';
          } else {
            return '';
          }
          return '';
        },
      setDataFromAxios:function(currPage){
        if(currPage!=null){
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios(this.$store.state.host+"restaurantController/getRestaurantsByPage?currPage="+this.currentPage+"&pageSize=5",null,"post")
          .then(res=>{
            console.log(res);
            this.restaurants = res.tList
            this.pageInfo = res.obj;

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
        handleAddRestaurant:function() {
          let _this = this;
          _this.addDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showAddRestaurant.init();
          })
        },
        handleEditRestaurant:function(index,restaurant) {
          let _this = this;
          _this.editDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showEditRestaurant.init(restaurant);
          })
        },
        handleDeleteRestaurant:function(index,restaurant) {
          let _this = this;
          _this.deleteDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showDeleteRestaurant.init(restaurant);
          })
        },
        initpic(){
           $(document).ready(function (){
             console.log($(".restaurantInfo"))
              $(".restaurantInfo").each(function (i,item){
                console.log(i)
                $(item).css("left",(i*3)+"px")
              })
           })
        }
    },

    //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      this.initpic();
    }
    }
</script>

<style scoped lang="stylus">
.main
  width 1000px
  margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
/deep/ .success-row
  background-color #f0f9eb
.restaurantPane
  position relative;
  height 20px
  .restaurantInfo
    height 20px
    position absolute;
    .imgDiv
      width 20px
      height 20px
      top 0px
      left 0px
      img
        width 20px
        height 20px


</style>
